﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Default.master" CodeBehind="HowToDetermineQualifyingUIElements.aspx.cs" Inherits="AjaxControlFramework.Docs.Tutorials.HowToDetermineQualifyingUIElements" %>

<asp:Content runat="server" ContentPlaceHolderID="HeadTitle">
    How to Determine Which UI Elements Qualify For Ajaxification - Tutorials - Docs - AJAX Control Framework
</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="Title">
    How to Determine Which UI Elements Qualify For Ajaxification
</asp:Content>

<asp:Content runat="server" ContentPlaceHolderID="Content">
    <div class="content_group">
        <fieldset class="notice">
            <legend>Note</legend>
            
            <p>
                To help demonstrate the concepts being explained in this tutorial, the 
                <span class="important">BingMapsSample</span> Visual Studio project, available with the current 
                release and packaged in the source code, will be referenced in all of the examples.
            </p>
        </fieldset>
        
        
        <p>
            Listed below are the most common characteristics of a UI region within a web application 
            along with the most outstanding characteristics of a region that qualifies for Ajaxification.
        </p>
        
        <p>
            <strong>Characteristics of a region:</strong>
        </p>
        
        <ul>
            <li>Its UI elements visually appear as if they are grouped together.</li>
            <li>Its UI elements involved all contribute to the same function requirement(s).</li>
            <li></li>
            <li></li>
        </ul>
        
        
        <p>
            <strong>Characteristics of an AJAX enabled region:</strong>
        </p>
        
        <ul>
            <li>Its contents are very dynamic.</li>
            <li>Its function is demanding of the user's attention.</li>
            <li></li>
            <li></li>
        </ul>
        
        <br />
        
        <p>
            Take a look at the image below to see how the UI of the <span class="code_element">Default.aspx</span> page 
            of the sample Bing Maps project is broken up into regions. Really take your time and analyze the image above. 
            Do you agree with how the UI was broken up? If not, think about how you would do it differently and why? 
            (Feel free to start a discussion on the CodePlex Discussions page if you would like to share your own opinions. 
            <a href="http://ajaxcontrol.codeplex.com/Thread/List.aspx">http://ajaxcontrol.codeplex.com/Thread/List.aspx</a>) 
        </p>
        
        <a class="image_link" href="/images/HowToDetermineQualifyingUIElements1.png" title="Click to view the fullsize image.">
            <img src="/images/HowToDetermineQualifyingUIElements1.png" alt="Outline of Qualifying UI Elements" />
        </a>
        
        <p>
            The UI of the <span class="code_element">Default.aspx</span> page is broken up into 4 regions:
        </p>
        
        <ol class="region_list">            
            <li>
                <strong>Results List</strong> - The bottom-left panel containing the paged list of search results.<br />
                This region is implemented within the <span class="code_element">BingMapsSample.ucSearchResultsList</span> file.
                
                Why did I choose to make it AJAX enabled?
            </li>
            
            <li>
                <strong>Search Form</strong> - The top-left panel containing the "Keywords" input field and "Search" submit button.<br />
                This region is implemented within the <span class="code_element">BingMapsSample.ucSearchForm</span> file.
                
                Why did I choose to not make is AJAX enabled?
            </li>
            
            <li>
                <strong>Results Map</strong> - The right panel containing the interactive Bing Map with all of the search results 
                plotted on it. <br />
                This region is implemented within the <span class="code_element">BingMapsSample.ucSearchResultsMap</span> file.
            </li>
            
            <li>
                <strong>Place Description</strong> - The information box popups that appear when hovering the mouse cursor over a 
                place's pushpin on the map.<br />
                This region is implemented within the <span class="code_element">BingMapsSample.ucPlaceDescription</span> file.
            </li>
        </ol>
    </div>
</asp:Content>